<template>
  <div>
    <div class="userFeed">
      <div class="userFeedContent">
        <ul>

            <li  v-for="item in content" :key="item.id">
              <div class="userFeedContentTop">
                <i class="iconfont icon-hot"></i>
                <span>热门推荐</span>
              </div>
              <div class="userFeedContentSub">
                <div class="userFeedTop">
                  <div class="userFeedTopLeft">
                    <div class="userFeedTopAvatar">
                      <img :src="item.user.avatar" alt="">
                    </div>
                    <div class="userFeedTopright">
                      <p class="userFeedToprightName">{{item.user.nickname}}</p>
                      <p>{{item.gmt_create}}</p>
                    </div>
                  </div>
                  <!--<div class="userFeedRight active">-->
                    <!--<button class="btn btn-light" v-show="item.is_follow" @click="myFollow(item)">-->
                      <!--<i class="iconfont icon-dagou1"></i>-->
                      <!--已关注-->
                    <!--</button>-->
                    <!--<button class="btn btn-primary" v-show="!item.is_follow" @click="unFollow(item)">-->
                      <!--<i class="iconfont icon-aixin"></i>-->
                      <!--关注-->
                    <!--</button>-->
                  <!--</div>-->
                </div>

                <div class="userFeedSub">
                  <p class="userFeedSubText">{{item.text}}</p>
                  <div class="userFeedSubImg">
                    <ul v-if="item.text=='文字动态'">
                      <li>
                        <span>{{item.title}}</span>
                      </li>
                    </ul>
                    <ul v-else-if="item.text">
                      <li v-for="(i,index) in item.pic" :key="i">
                        <figure :style="{ 'background-image': 'url(' + i + ')','background-repeat':'no-repeat','background-size':'cover' }" @click="bigImg(index)"></figure>
                      </li>
                    </ul>
                    <ul v-else-if="item.text=='视频动态'">
                      <li>
                        <video :src="item.video"></video>
                      </li>
                    </ul>
                    <ul v-else="">
                        <img :src="item.cover">
                    </ul>
                  </div>
                </div>
                <div class="userFeedHandle">
                  <div class="userFeedHandleLeft">
                  <span>
                    <i class="iconfont icon-shoucang"></i>
                    <em>10</em>
                  </span>
                    <span>
                    <router-link :to="'/detail/comment/' + item.id">
                      <i class="iconfont icon-pinglun"></i>
                      <em>10</em>
                    </router-link>
                  </span>
                    <span>
                    <i class="iconfont icon-dianzan"></i>
                    <em>10</em>
                  </span>
                  </div>
                  <!--<div class="userFeedHandleRight">-->
                    <!--<i class="iconfont icon-shanchu"></i>-->
                  <!--</div>-->
                </div>
              </div>
            </li>
          <div class="imgMask" v-if="showBigImg" @click.stop="showBigImg=!showBigImg">
            <svg class="icon prev" aria-hidden="true" @click.stop="prev">
              <use xlink:href="#icon-zuoyoujian1"></use>
            </svg>
            <div class="showImg" >
              <img class="bigImg" :src="pic[num]">
            </div>
            <svg class="icon next" aria-hidden="true" @click.stop="next">
              <use xlink:href="#icon-zuoyoujian"></use>
            </svg>
          </div>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
  import axios from 'axios'

  export default {
    data() {
      return {
        content: [],
        pic: [],
        title: '',
        video: '',
        cover: '',
        text: '',
        nickname: '',
        avatar: '',
        access_key_id:'',
        access_key_secret:'',
        access_token:'',
        valid_time:'',
        showBigImg: false,
        num: 0
      }
    },
    methods: {
      getVideoFeed () {
        axios({
          method: 'post',
          url: 'https://bird.ioliu.cn/v2',
          params: {
            url: 'http://api.sns.sunnycare.cc/v1/auth/access'
          },
          data: {
          }
        }).then(this.getVideoFeedSucc)
      },
      getVideoFeedSucc (res) {
        res = res.data
        if (res.code && res.data) {
          const data = res.data
          this.access_key_id = data.access_key_id
          this.access_key_secret = data.access_key_secret
          this.access_token = data.access_token
          this.valid_time = data.valid_time
        }
      },
      getHomeFeed () {
        axios({
          method: 'post',
          url: 'https://bird.ioliu.cn/v2',
          params: {
            url: 'http://api.sns.sunnycare.cc/v1/group/content',
            access_token:''
          },
          data: {
            "group_id": "G00001",
            "page": "1",
            "time": "0"
          }
        }).then(this.getHomeFeedSucc)
      },
      getHomeFeedSucc(res) {
        res = res.data
        if (res.code && res.data) {
          const data = res.data
          this.content = data.content
          for (var i in this.content) {
            this.nickname = res.data.content[i].user.nickname
            this.is_follow = res.data.content[i].user.is_follow
            this.avatar = res.data.content[i].user
            this.pic = res.data.content[i].pic
            this.title = res.data.content[i].title
            this.video = res.data.content[i].video
            this.cover = res.data.content[i].cover
          }
          this.text = res.data.text
        }
      },
      bigImg (index) {
        this.showBigImg = true
        this.num = index
      },
      prev () {
        if (this.num === 0) {
          this.num = 6
        }
        this.num--
        // console.log(this.num)
      },
      next () {
        if (this.num === 5) {
          this.num = -1
        }
        this.num++
      },
      // myFollow (item) {
      //   axios ({
      //     method: 'post',
      //     url: 'https://bird.ioliu.cn/v2',
      //     params: {
      //       url: 'http://api.sns.sunnycare.cc/v1/group/content'
      //     },
      //   }).then(res => {
      //     console.log('1231231231231')
      //     // item.is_follow = true
      //   })
      // },
      // unFollow (item) {
      //   axios ({
      //     method: 'post',
      //     url: 'https://bird.ioliu.cn/v2',
      //     params: {
      //       url: 'http://api.sns.sunnycare.cc/v1/group/content'
      //     },
      //   }).then(function (res) {
      //     item.is_follow = false
      //   })
      // }
    },
    mounted() {
      this.getHomeFeed()
      this.getVideoFeed()
    }
  }
</script>

<style scoped>
  .userFeed {
    margin: 3% 0;
    width: 100%;
  }

  .userFeedContent {
    margin-bottom: 15%;
  }

  .userFeedContent > ul > li {
    margin: 5% 0;
    background-color: #fff;
  }

  .userFeedContentTop {
    padding-left: 12px;
    height: 36px;
    border-bottom: 1px #efefef solid;
    line-height: 32px;
    color: #ff7e06;
  }

  .userFeedContentSub {
    border-bottom: 1px #efefef solid;
  }

  .userFeedTop {
    display: flex;
    justify-content: space-between;
    padding: 3% 7%;
    border-bottom: 1px #efefef solid;
  }

  .userFeedTopLeft {
    display: flex;
    align-items: center;
  }

  .userFeedTopAvatar {
    display: flex;
    justify-content: flex-start;
    width: 48px;
    height: 48px;
  }

  .userFeedTopAvatar > img {
    width: 48px;
    height: 48px;
  }

  .userFeedTopright {
    display: flex;
    flex-direction: column;
  }

  .userFeedTopright > p {
    margin-left: 12px;
    line-height: 1.5;
  }

  .userFeedToprightName {
    font-size: 14px;
  }

  .userFeedRight {
    display: flex;
    align-items: center;
  }

  .userFeedSub {
    border-bottom: 1px #efefef solid;
    padding: 2% 7%;
  }

  .userFeedSub > p {
    width: 100%;
    padding: 2% 0;
    font-size: 1rem;
    line-height: 16px;
  }

  .userFeedSub .userFeedSubImg {
    height: 340px;
    overflow: hidden;
    align-items: center;
    flex-direction: column;
    position: relative;
    display: flex;
  }

  .userFeedSub > .userFeedSubImg > img {
    max-width: 100%;
  }

  .userFeedSub > .userFeedSubImg > ul > img {
    max-width: 100%;
  }

  .userFeedSubImg > ul {
    display: flex;
    flex-wrap: wrap;
  }

  .userFeedSubImg > ul > li {
    width: 30%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 5% 5% 0;
    height: 100px;
    overflow: hidden;
  }

  .userFeedSubImg > ul > li:nth-child(3n) {
    margin-right: 0;
  }

  .userFeedSubImg > ul > li > figure {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    height: 100%;
  }

  .userFeedSubImg > ul > li > img {
    display: flex;
    justify-content: center;
    align-items: center;
    /*width: 100%;*/
    height: 100%;
  }

  /*.userFeedSub > .userFeedSubImg > span {*/
    /*position: absolute;*/
    /*bottom: 0;*/
    /*width: 100%;*/
    /*background-color: rgba(0, 0, 0, .5);*/
    /*left: 0;*/
    /*padding: 2% 7%;*/
    /*color: #fff;*/
  /*}*/

  .userFeedHandle {
    display: flex;
    height: 36px;
    padding: 0 7%;
    justify-content: space-between;
  }

  .userFeedHandleLeft {
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }

  .userFeedHandleLeft > span {
    margin-right: 2rem;
  }

  .userFeedHandleRight {
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }

  .imgMask{
    position: absolute;
    height: 100%;
    width:100%;
    top:0;
    left:0;
    z-index: 100;
    background:rgba(0,0,0,.6);
  }
  .showImg{
    height:auto;
    width:300px;
    position: absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    border:10px solid #fff;
  }
  .bigImg{
    width:100%;
    height:100%;
  }
  .prev{
    position: absolute;
    top:50%;
    left:10px;
    width:40px;
    transform:translate(10px,-50%);
  }
  .next{
    width:40px;
    transform:translate(10px,-50%);
    position: absolute;
    top:50%;
    right:20px;
  }
</style>
